<script lang="ts" setup>
import { ref, inject, reactive, onMounted } from 'vue'
import StagingHeaser from '../components/StagingHeaser.vue';
import StagingAsideComp from '../components/StagingAsideComp.vue';
import { RouterView } from 'vue-router'
const axios = inject('axios') //注入 axios
// 导航栏菜单选中索引
const activeIndex = ref('/staging')
</script>
<template>
    <el-container>
        <el-header style="width: 100%;padding: 0px 0px;">
            <StagingHeaser />
        </el-header>
        <div class="Navigation-container">
            <el-container class="Navigation">
                <StagingAsideComp style="width: 100%;" :active-index="activeIndex" />
            </el-container>
            <el-container class="Navigation-content">
                <RouterView />
            </el-container>
        </div>
    </el-container>
</template>

<style scoped>
.Navigation-container {
    margin-left: 80px;
    margin-top: 100px;
    width: 90%;
    height: 700px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    /* 使用 flex 布局 */
}

.Navigation {
    /* margin-top: 10px; */
    height: 700px;
    width: 20%;
    display: flex;
    /* 水平居中 */
    background-image: url(../img/shuqian.png);
    /* background-color: blue; */
    box-shadow: 8px 0 8px rgba(0, 0, 0, 0.2);
    /* 外阴影设置 */
}

.Navigation-content {
    /* margin-left: 300px; */
    display: flex;
    /* float: right; */
    /* background-color: blue; */
    width: 80%;
    height: auto;
    align-items: center;
    /* 垂直居中对齐 */
    background-image: url(../img/Logo.png);
    background-size: 49%;
    background-position: center;
    /* 图像居中 */
    background-repeat: no-repeat;
    /* 不重复背景图像 */
}
</style>